/*!
 * ---------------------------------------------------------------------
 *
 * GLPI - Gestionnaire Libre de Parc Informatique
 *
 * http://glpi-project.org
 *
 * @copyright 2015-2024 Teclib' and contributors.
 * @copyright 2003-2014 by the INDEPNET Development Team.
 * @licence   https://www.gnu.org/licenses/gpl-3.0.html
 *
 * ---------------------------------------------------------------------
 *
 * LICENSE
 *
 * This file is part of GLPI.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * ---------------------------------------------------------------------
 */

// TODO Encapsulate into a class

.form-check-input[name="as_map"]:checked {
    background-color: var(--tblr-info);
}

.form-check-input[name="is_deleted"]:checked {
    background-color: var(--tblr-danger)
}

// Prevent search results from filling all available vertical space
// Useful when displaying multipler search results on the same page
.search-no-forced-height {
    .search-container {
        height: unset !important;
    }
}

.search_page {
    @include media-breakpoint-up(lg) {
        display: flex;
        align-items: stretch;
    }

    .search-container {
        @include media-breakpoint-up(lg) {
            overflow: auto;
            height: calc(100vh - var(--glpi-contextbar-height) - var(--glpi-content-margin));
            padding: 0;
            margin-left: calc(var(--tblr-gutter-x) / 2);
            margin-right: calc(var(--tblr-gutter-x) / 2);
            width: 100%;

            .dashboard-card {
                @include media-breakpoint-up(lg) {
                    position: sticky;
                    left: 0;
                }
            }

            &.disable-overflow-y {
                height: auto;
            }
        }

        .search-form-container {
            @include media-breakpoint-up(lg) {
                position: sticky;
                left: 0;
            }

            .search-form, .sort-container {
                background-color: var(--glpi-search-bg);
                color: var(--glpi-search-fg);
                border-color: var(--glpi-search-border-color);
                max-height: 60vh;
                overflow-y: auto;

                // try having same width on link dropdowns
                .select2-container {
                    min-width: 58px;
                }

                .sub_criteria {
                    background-color: color-mix(in srgb, var(--glpi-search-bg), black 1%);
                }

                .search_actions, .sort_actions {
                    position: sticky;
                    bottom: 0;
                }
            }
        }

        .search-card {
            display: grid;
            min-width: 100%;
            width: fit-content;

            .massiveactions-control {
                grid-column: 1;
                grid-row: 1;
                width: 100%;
                z-index: #{$zindex-sticky + 2} !important;
            }

            .search-header {
                grid-column: 1;
                grid-row: 1;
                height: 45px;
                border-bottom: 0;
                position: sticky;
                top: -1px;
                left: 0;
                background-color: inherit;
                border-radius: var(--tblr-border-radius);
                z-index: #{$zindex-sticky + 1};

                .search-controls {
                    width: 100%;

                    .primary-controls {
                        position: sticky;
                        left: 18px;
                    }

                    .btn-active-search {
                        background-color: #cff5d1;
                        color: rgb(77, 77, 77);
                    }

                    .btn-active-sort {
                        background-color: #ffe0cc;
                        color: rgb(77, 77, 77);
                    }

                    .secondary-controls {
                        position: sticky;
                        right: 23px;

                        @include media-breakpoint-down(lg) {
                            right: 0;
                        }
                    }
                }
            }

            .table-responsive-lg {
                @include media-breakpoint-down(lg) {
                    max-width: calc(100vw - 2rem);
                }
            }

            .search-results {
                border-collapse: separate;
                border-spacing: 0;

                a {
                    font-weight: 500;
                }

                @include media-breakpoint-up(lg) {
                    thead:first-child {
                        th {
                            z-index: $zindex-sticky;
                            position: sticky;
                            top: 44px;
                            border: 1px solid var(--tblr-border-color);
                            border-left: 0;
                            border-right: 0;
                            min-width: max-content;
                            vertical-align: top;
                        }
                    }
                }

                @media (max-width: 1899.98px) {
                    font-size: 0.75rem;

                    & > :not(caption) > * > * {
                        padding: 0.25rem;
                    }
                }

                &.deleted-results {
                    color: rgb(56, 13, 13);
                }
            }

            .search-footer {
                position: sticky;
                bottom: 0;

                @include media-breakpoint-up(lg) {
                    .search-pager {
                        .search-limit {
                            position: sticky;
                            left: 22px;
                        }

                        .page-infos {
                            position: sticky;
                            left: 250px;
                            right: 270px;
                        }

                        .pagination {
                            position: sticky;
                            right: 22px;
                        }
                    }
                }
            }
        }

        div.spinner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #80808033;
            z-index: 20;

            div.spinner-border {
                width: 50px;
                height: 50px;
                position: fixed;
                top: 50%;
                left: 50%;
                border-width: 4px;
            }
        }
    }
}

body.horizontal-layout {
    .search_page:not(.search_page_global) {
        .search-container {
            @include media-breakpoint-up(lg) {
                height: calc(100vh - var(--glpi-topbar-height) - var(--glpi-contextbar-height) - var(--glpi-content-margin));
            }
        }
    }

    .search_page_global {
        @include media-breakpoint-up(lg) {
            height: calc(100vh - var(--glpi-topbar-height) - var(--glpi-contextbar-height) - var(--glpi-content-margin));
        }
    }
}

.badge_block {
    white-space: nowrap;
    border: 1px solid transparent;
    padding-right: 6px;
    border-radius: 2px;
    display: flex;

    span {
        width: 20px;
    }
}

table.search-results {
    thead th[data-searchopt-id][data-nosort] {
        vertical-align: bottom !important;// Fix alignment for when no sorting indicator element is present
    }

    thead th[data-searchopt-id]:not([data-searchopt-id=""]):not([data-nosort]) {
        cursor: pointer;

        .sort-indicator {
            vertical-align: super;
            font-size: 1.2em;
            white-space: nowrap;
        }
    }
}
